<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">

</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" lay-filter="demo" action="">
                    <div class="layui-form-item">

                        <div class="layui-form-item" id="picker">
                            <div class="layui-form-label">订单地址</div>
                            <div class="layui-input-inline" style="width: 200px;display: none">
                                <select name="orderProvince" class="province-selector" data-value="" lay-filter="province-1">
                                    <option value="">请选择省</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 200px;display: none">
                                <select name="orderCity" class="city-selector" data-value="" lay-filter="city-1">
                                    <option value="">请选择市</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 200px;">
                                <select name="orderArea" class="county-selector" data-value="" lay-filter="county-1">
                                    <option value="">请选择区</option>
                                </select>
                            </div>

                            <div class="layui-input-inline" style="width: 200px;">
                                <select name="orderTime" lay-filter="time-selector">
                                    <option value="-1">请选择时间段</option>
                                    <option value="0">上午</option>
                                    <option value="1">下午</option>
                                    <option value="2">晚上</option>
                                </select>
                            </div>
                        </div>



                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>





        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">接单</a>
        </script>

    </div>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../../js/axios.min.js"></script>
<script>

    var engineerProvince, engineerCity, engineerArea, engineerId;
    axios.defaults.withCredentials = true


    layui.use(['form', 'table','layarea'], function () {
        //引入layui集成的包
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layarea = layui.layarea;

        axios.get('http://localhost:8080/order/getOrdersBy103', {
            withCredentials: true

        })
            .then(function (response) {
                // 请求成功的处理逻辑
                var tableData = response.data.data;
                // 定义每页显示的数量和当前页码
                var pageSize = 10; // 每页显示10条数据
                var currentPage = 1; // 当前页码为1

                // 计算需要显示的数据范围
                var startIndex = (currentPage - 1) * pageSize;
                var endIndex = startIndex + pageSize;

                // 提取需要显示的数据
                var currentPageData = tableData.slice(startIndex, endIndex);


                // 定义数据表格的配置项
                var tableConfig = {
                    elem: '#currentTableId',
                    data: tableData, // 设置完整的数据列表
                    page: true, // 开启分页
                    limit: pageSize, // 每页显示的数量
                    cols: [[
                        {type: "checkbox", width: 50},
                        {field: 'userName', width: 70, title: '用户'},
                        {field: 'orderClientname', width: 70, title: '姓名'},
                        {field: 'productType', width: 130, title: '产品型号', sort: true},
                        {field: 'orderDescription', width: 200, title: '订单描述'},
                        {field: 'orderPriority', width: 100, title: '优先级',sort: true, templet: '#priorTpl', sort: true},
                        {field: 'orderClientphone', width: 140, title: '用户手机号',},
//                        {field: 'orderDate', width: 110, title: '日期', sort: true},
//                        {field: 'orderTime', width: 110, title: '时间', templet: '#timeTpl', sort: true},
                        {field: 'orderDateTime', width: 160, title: '日期时间', templet: '#dateTimeTpl', sort: true},
                        {field: 'orderArea', width: 80, title: '区县'},
                        {field: 'orderAddress', width: 250, title: '详细地址',},
                        {title: '操作', minWidth: 50, toolbar: '#currentTableBar', align: "center"}
                    ]],
                    // 设置初始排序
                    initSort: {
                        field: 'orderPriority',
                        type: 'desc' // 降序排列
                    }
                };

                // 渲染表格
                var tableInstance = table.render(tableConfig);

                // 监听分页切换事件
                table.on('page(currentTableFilter)', function(obj) {
                    // 更新当前页码
                    currentPage = obj.curr;

                    // 计算需要显示的数据范围
                    var startIndex = (currentPage - 1) * pageSize;
                    var endIndex = startIndex + pageSize;

                    // 提取需要显示的数据
                    var currentPageData = dataList.slice(startIndex, endIndex);

                    // 更新表格数据
                    tableInstance.reload({
                        data: currentPageData
                    });
                });
                axios.get('http://localhost:8080/engineer/getEngineerAddress',{
                    withCredentials: true
                }).then(function(res){
                    var data = res.data.data
                    console.log(data)
                    /*返回数据实例
                    {
                        "code": 0,
                        "count": 0,
                     "data": {
                            "engineerProvince": "天津市",
                             "engineerCity": "天津市",
                               "engineerArea": "西青区"
                             }
                    }
                    * */

                    layarea.render({
                        elem: '#picker',

                        data: {
                            province: data.engineerProvince,
                            city: data.engineerCity,
                            county: data.engineerArea
                        },

                    });
                    return false;
                })

            })
            .catch(function (error) {
                console.log(document.cookie)
                // 请求失败的处理逻辑
                console.error(error);
            });


        // 定义获取表单数据的函数
        window.getFormData = function() {
            // 获取表单数据
            var formdata = new FormData();
            var formData = form.val('demo');
            for (var key in formData) {
                formdata.append(key, formData[key]);
            }
            formdata.append("page",1)
            formdata.append("limit",10)
            console.log(formdata);

            // 发送请求
            axios.post('http://localhost:8080/order/search', formdata, {
                withCredentials: true
            }).then(function(res) {
                table.reload('currentTableId', {
                    data: res.data.data,
                    page: { // 指定页码和每页显示的数据条数
                        curr: 1,
                        limit: 10
                    },
                    done: function(res, curr, count) {
                        // 重新加载完成后的回调函数
                        console.log('重新加载完成');
                    }
                });
            });
        };

// 每隔 10 秒调用一次获取表单数据的函数
        setInterval(function() {
            window.getFormData();
        }, 4000);


        // 监听搜索操作
        // setInterval(function() {
        //     var formData;
        //     // 定义获取表单数据的函数
        //     window.getFormData = function() {
        //         // 获取表单数据
        //         formData =form.val('demo');
        //         console.log("formdata是"+formData);
        //     };

            // axios.post('http://localhost:8080/order/search',formData,{
            //     withCredentials: true
            // }).then(function(res){
            //     table.reload('currentTableId', {
            //         data: res.data.data,
            //         page: { // 指定页码和每页显示的数据条数
            //             curr: 1,
            //             limit: 10
            //         },
            //         done: function (res, curr, count) {
            //             // 重新加载完成后的回调函数
            //             console.log('重新加载完成');
            //         }
            //     });
            // });

        // }, 1000);

        //
        form.on('submit(data-search-btn)', function (data) {

            data = data.field;
            var datafome = new FormData();

            for(var key in data){
                datafome.append(key,data[key]);
            }
            datafome.append("page",1);
            datafome.append("limit",10)
            axios.post('http://localhost:8080/order/search', datafome, {
                withCredentials: true
            }).then(function(res) {
                table.reload('currentTableId', {
                    data: res.data.data,
                    page: { // 指定页码和每页显示的数据条数
                        curr: 1,
                        limit: 10
                    },
                    done: function(res, curr, count) {
                        // 重新加载完成后的回调函数
                        console.log('重新加载完成');
                    }
                });
            });



            return false;
        });


        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            var orderId = data.orderId;
            console.log(data);
            if (obj.event === 'edit') {
                layer.confirm('是否确定接单？', {
                    btn: ['确定', '取消'], // 自定义按钮文本
                    shadeClose: true
                }, function (index) {
                    // 在这里执行接单的逻辑
                    axios.get('http://localhost:8080/order/takeOrder/' + orderId, {
                        withCredentials: true
                    }).then(function (response) {
                        // 接单成功，显示成功提示信息
                        var output = response.data.data;
                        if(output === "ok"){
                            layer.msg("接单成功");
                            table.reload('currentTableId');
                        }
                        else if(output === "order is used"){
                            layer.msg("抱歉，订单已被接单");
                            table.reload('currentTableId');
                        }
                        else if(output === "order time is taken"){
                            layer.msg("抱歉，您在当前时段有尚未完成的任务，请完成任务或换个时段再试");
                            table.reload('currentTableId');
                        }
                    }).catch(function (error) {
                        // 接单失败，显示失败提示信息
                        layer.msg("发生错误，请稍后再试");
                        table.reload('currentTableId');
                    });

                    layer.close(index); // 关闭确认窗口
                }, function (index) {
                    layer.close(index);
                });
                return false;
            }
        });

    });
    function formatTime(time) {
        if (time === 0) {
            return '上午';
        } else if (time === 1) {
            return '下午';
        } else if (time === 2) {
            return '晚上';
        } else {
            return '';
        }
    }
</script>
<script type="text/html" id="timeTpl">
    {{#  if(d.orderTime === 0){ }}
    上午
    {{#  } else if(d.orderTime === 1) { }}
    下午
    {{#  } else if(d.orderTime === 2) { }}
    晚上
    {{#  } }}
</script>
<script type="text/html" id="dateTimeTpl">
    {{ layui.util.toDateString(d.orderDate, 'yyyy-MM-dd') + ' ' + formatTime(d.orderTime) }}
</script>
<script type="text/html" id="priorTpl">
    {{#  if(d.orderPriority === 0){ }}
    正常
    {{#  } else if(d.orderPriority === 1) { }}
    较高
    {{#  } else if(d.orderPriority === 2) { }}
    高
    {{#  } else if(d.orderPriority === 3) { }}
    非常高
    {{#  } }}
</script>
</body>
</html>